<template>
    <div class="course_detail">
        <!--        <y-watch-video  v-if="courseInfo.isPay" :courseInfo="courseInfo" @playfunc="videoPlay" :nowNo="nowPeriodNo" ref="watchVideo"></y-watch-video>-->
        <y-watch-video  :classData="classData" @playfunc="videoPlay" :nowNo="nowPeriodNo" ref="watchVideo" ></y-watch-video>
        <!--        <y-display v-else :courseInfo="courseInfo" ref="watchVideo"></y-display>-->
        <!--        中间-->
        <y-display :classData="classData" :ChildId="ChildId" :isTitileUpdate="isTitileUpdate" :isFree="isFree" :videoId="videoId" @TeacherVideoStatus="TeacherVideoStatus"></y-display>


        <div class=" detail_info detail_box clearfix">
            <div class="layout_left">
                <ul class="course_tab clearfix">
                    <li :class="{on: tab === 'info'}"><a href="javascript:" @click="tab = 'info'">课程介绍</a></li>
                    <li :class="{on: tab === 'big'}"><a href="javascript:" @click="tab = 'big'">录播课程</a></li>
                </ul>
                <div class="content_info" v-if="tab === 'info'">
                    <div class="introduce" v-html="classData.description"></div>
                    <y-syllabus  @playfunc="videoPlay" :ChapterData="ChapterData" @FuChuanZi="FuChuanZi" @UpdateStatus="UpdateStatus" @updateIsFree="updateIsFree" @updateVideoId="updateVideoId" :TeacherStatus="TeacherStatus"></y-syllabus>
                    <!--课程大纲-->
                </div>
                <!--                    <y-syllabus @playfunc="videoPlay" :list="courseInfo.chapterList" :nowNo="nowPeriodNo"></y-syllabus>-->
                <div class="content_info"  v-if="tab === 'big'">
                    <y-syllabus @playfunc="videoPlay"  :ChapterData="ChapterData"  @FuChuanZi="FuChuanZi" @UpdateStatus="UpdateStatus" @updateIsFree="updateIsFree" @updateVideoId="updateVideoId" :TeacherStatus="TeacherStatus"></y-syllabus>
                </div>
            </div>
            <div class="layout_right">
                <div class="teacher_info clearfix">
                    <span class="head">讲师简介</span>
                    <div class="teacher_msg">
                        <div class="teacher_msg_right">

                            <div>
                                <!--                            <img class="teacher_phone" v-if="classData.avatar" :src="classData.avatar" alt="">-->
                                <img class="teacher_phone" v-if="classData.avatar" :src="classData.avatar" alt="">
                            </div>
                            <!--                            <img class="teacher_phone" v-else src="./src/assets/image/da1.png" alt="">-->
                            <div class="teacher_name">
                                <router-link :to="{path: '/teacherXinX',query:{teacherId:classData.teacherId}}">{{classData.name}}</router-link>
                                <div>
                                    <a href="javascript:" class="atten_btn" @click="guanZhuTeacher" v-if="guanZhuStatus===0"><span class="iconfont"></span>&nbsp;未关注</a>
                                    <a href="javascript:" class="atten_btn" @click="quxiaoGuanZhu" v-else><span class="iconfont" style="color: red"></span>&nbsp;已关注</a>
                                </div>
                            </div>
                            <div v-html="classData.intro" class="info_box"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import YDisplay from "@/components/course/Display"
    import YSyllabus from "@/components/course/Syllabus"
    import YWatchVideo from '@/components/course/WatchVideo'
    export default {
        name: "DetailId",
        components:{
            YDisplay,
            YSyllabus,
            YWatchVideo,
        },
        data(){
            return{
                //课程和教师数据
                tab: 'info',
                //当前播放章节
                nowPeriodNo: '',
                classData:{},
                // id:'1301034714081005570'
                id: this.$route.params.id,
                ChapterData:{},
                //孩子传过来的id
                ChildId:'',
                videoId:'',

                isFree:false,
                isTitileUpdate:false,
                TeacherStatus:false,
                //关注的实体类
                guanZhuData:{
                    teacherId:'',
                    memberId:window.sessionStorage.getItem("memberId"),
                },
                guanZhuStatus:0,

            }
        },
        created() {
            this.queryClassAndTeacher();
            this.findChapterById();
            //    是否关注

        },

        methods:{


            //进入页面渲染是否已经关注
            queryGuanZhuById(){
                // console.log(this.guanZhuData);
                var that=this;
                this.$http.post("/core/shoucangTeacher/findAttentionTeacher",this.guanZhuData).then(function (resp) {
                    that.guanZhuStatus=resp.data.data;
                    // console.log(resp.data.data)
                })
            },
            //关注讲师
            guanZhuTeacher(){
                if (sessionStorage.getItem("mobile")){
                    var that=this;
                    this.$http.post("/core/shoucangTeacher/addAttentionTeacher",this.guanZhuData).then(function (resp) {
                        if (resp.data.code===200){
                            that.$message.success(resp.data.msg)
                        }else {
                            that.$message.error(resp.data.msg)
                        }
                        that.queryGuanZhuById();
                    })
                }else {
                    this.$msgBox({
                        content: '请先登录',
                        isShowCancelBtn: false
                    }).then(() => {
                        this.$router.push({
                            path: '/qianLogin'
                        }); //登录
                    })
                }
            },
            quxiaoGuanZhu(){
                var that=this;
                this.$http.post("/core/shoucangTeacher/deleteAttentionTeacher",this.guanZhuData).then(function (resp) {
                    if (resp.data.code===200){
                        that.$message.success(resp.data.msg)
                    }else {
                        that.$message.error(resp.data.msg)
                    }
                    that.queryGuanZhuById();

                })
            },
            //父传子
            UpdateStatus(isTitileUpdate){
                this.isTitileUpdate=isTitileUpdate;
                // alert(this.isTitileUpdate)

            },
            FuChuanZi: function (videoSourceId) {
                // childValue就是子组件传过来的值
                this.ChildId = videoSourceId

            },
            TeacherVideoStatus(TeacherVideoStatus){
                this.TeacherStatus=TeacherVideoStatus;

            },
            //是否免费
            updateIsFree(isFree){
                this.isFree=isFree;
                // alert(this.isFree)
            },
            //VideoId
            updateVideoId(val){
                this.videoId=val;
                // alert(this.videoId)
            },
            videoPlay (data) {
                if (this.courseInfo.isPay || data.isFree) {
                    window.scrollTo(0, 0)
                    this.nowPeriodNo = data.id
                    chapterSign({
                        ip: 'string',
                        periodId: data.id,
                        videoVid: data.videoVid
                    }).then(res => {
                        res = res.data
                        this.isResetVideo = false
                        if (res.code === 200) {
                            this.play(Object.assign({vid: data.videoVid}, res.data));
                        } else if (res.code === 402) {
                            this.$msgBox({
                                content: '购买后才可以观看',
                                isShowCancelBtn: false
                            })
                        }
                    }).catch(() => {
                        this.isResetVideo = false
                    })
                } else {
                    this.$msgBox({
                        content: '购买后才可以播放',
                        isShowCancelBtn: false
                    })
                    return false;
                }
            },
            //根据课程id查询课程和教师信息
            queryClassAndTeacher(){
                var that=this;
                this.$http.post("/core/course/queryAllCoursesAndTeacherName/"+this.id).then(function (resp) {
                    if (resp.data.code===200){
                        that.classData=resp.data.data;
                        that.guanZhuData.teacherId=resp.data.data.teacherId;
                        // that.teacherVideoID=that.guanZhuData.teacherid;
                        that.queryGuanZhuById();
                    }

                    // console.log(that.guanZhuData.teacherid)
                })
            },
            //根据课程id查询章节和课时信息
            findChapterById(){
                var that=this;
                this.$http.post("/course/chapter/findChapterById/"+this.id).then(function (resp) {
                    if (resp.data.code===200){
                        // console.log(resp.data.data)
                        that.ChapterData=resp.data.data;
                    }
                })
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss">
    .course_detail{
        .detail_info {
            margin: 20px auto 60px;
            width: 1200px;
        }
        .layout_left {
            width: 920px;
            float: left;
            .info_body {
                margin-bottom: 30px;
            }
        }
        .course_tab{
            padding-left: 30px;
            background: #fff;
            border-radius: 8px;
            margin-bottom: 20px;
            li {
                float: left;
                height: 66px;
                line-height: 66px;
                margin-right: 80px;
                &.on {
                    border-bottom: 2px solid #D51423;
                    a {
                        color: #D51423;
                    }
                }
                a {
                    color: #000;
                    font-size: 14px;
                    font-weight: 700;
                    &:hover {
                        text-decoration: none;
                        color: #D51423;
                    }
                }
            }
        }
        .content_info{
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            min-height: 400px;
            .title {
                border-left: 3px solid #000;
                padding-left: 12px;
                font-size: 16px;
                color: #000;
                font-weight: 700;
                margin-bottom: 25px;
            }
            .introduce{
                font-size: 14px;
                line-height: 30px;
                color: #333;
                padding-left: 8px;
            }
        }
        .layout_right{
            width: 260px;
            float: right;
        }
        .teacher_info {
            background: #fff;
            border-radius: 8px;
            position: relative;
            min-height: 180px;
            .head {
                display: block;
                line-height: 60px;
                height: 60px;
                padding-left: 20px;
                font-size: 14px;
                color: #333;
                border-bottom: 1px solid rgb(228, 228, 228);
            }
            .teacher_phone {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                background: rgb(228, 228, 228);
                text-align: center;
                line-height: 46px;
                font-size: 13px;
                color: #999;
                float:left;
                margin: 0px 10px 0 10px;
                img {
                    width: 46px;
                    height: 46px;
                    border-radius: 50%;
                }
            }
            .teacher_msg_right {
                width: 235px;
                float: right;
                margin: 12px 15px 12px 12px;
                line-height: 20px;
            }
            .teacher_name {
                font-size: 14px;
                font-weight: 700;
                color: #333;
                margin-bottom: 10px;
            }
        }
    }
</style>
